<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户工具</el-breadcrumb-item>
                <el-breadcrumb-item>快捷回复列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;">
            <div>
                <div style="display: flex;align-items: center;margin-bottom: 20px;">
                    <el-button type="primary" @click="ClickModalAdd" style="margin-right: 10px;">添加快捷回复</el-button>
                    <el-popconfirm title="此操作将永久删除该文件, 是否继续?" @confirm="DeleteList" style="height: inherit;">
                        <el-button type="danger" :disabled="selectedRowKeys.length > 0?false:true" slot="reference">删除</el-button>
                    </el-popconfirm>
                </div>
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="display: flex;align-items: center;font-size: 16px;cursor: pointer;">
                        <span style="padding: 0 10px;color: #666;">分 组 :</span>
                        <div style="display: flex;align-items: center;">
                            <span @click="SelectGroup">{{GroupTitle}}</span>
                            <i @click="cleanGroup" v-if="GroupID !=''" style="font-size: 18px;color: #999;margin-left: 14px;" class="el-icon-circle-close"></i>
                        </div>
                    </div>
                    <div>
                        <el-input placeholder="请输入内容" style="width: 300px;" v-model="keyword" clearable></el-input>
                        <el-button icon="el-icon-search" type="primary" style="margin-left: 10px;" @clear="SearchList" @click="SearchList">搜索</el-button>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button type="primary" size="mini" @click="EditItem(index)">编辑</el-button>
                            <el-popconfirm title="此操作将永久删除该文件, 是否继续?" @confirm="DeleteItem(index)">
                                <el-button type="danger" size="mini" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </Table>
                <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
            </div>
        </div>
        <modal :title="MadalTitle" v-model="visible" :centered="true" :maskClosable="false" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="快捷回复:" prop="desc">
                        <el-input type="textarea" :rows="3" placeholder="请输入添加快捷回复" clearable v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="添加到:" prop="selectValue">
                        <span v-if="ruleForm.selectValue != ''" style="font-size: 16px;cursor: pointer;" @click="SelectGroup()">{{ruleForm.selectValue}}</span>
                        <span v-else style="font-size: 16px;cursor: pointer;" @click="SelectGroup()">请选择分组</span>
                    </el-form-item>
                </el-form>
            </div>
        </modal>
        <modal title="选择分组" v-model="MadalGroup" :centered="true" :maskClosable="false" :footer="null">
            <div style="display: flex;align-items: center;margin-bottom: 20px;">
                <el-input placeholder="请输入内容" style="flex: 1" v-model="GroupValue" clearable></el-input>
                <el-button size="small" icon="el-icon-search" type="primary" style="margin-left: 10px;" @clear="SearchTable" @click="SearchTable">搜索</el-button>
            </div>
            <div>
                <Table :columns="Groupfields" :data-source="GroupList" :bordered="true" :pagination="false" :loading="loading" size="small">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button size="mini" @click="SelectTableGroup(index)">选择</el-button>
                        </div>
                    </div>
                </Table>
                <pagination :total="GroupTotal" v-model="GroupPage" :pageSize.sync="GroupPageSize" :showQuickJumper="true" @change="handleGroupPageChange" @onShowSizeChange="onShowSizeGroupChange"></pagination>
            </div>
        </modal>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'labelView',
        components: {
            pagination,
            Table,
            modal,
            // Select
        },
        data() {
            return {
                keyword: '',
                listData: [],
                MadalTitle: '',
                visible: false,
                labelPosition: 'right',
                ruleForm: {
                    desc: '',
                    selectValue: '',
                },
                rules: {
                    desc: [
                        { required: true, message: '请输入快捷回复', trigger: 'blur' }
                    ],
                    selectValue: [
                        { required: true, message: '请选择分组', trigger: 'blur' }
                    ]
                },
                selectedRowKeys: [],
                total: 0, //定义初始有多少条数据
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                EditID: '',
                options: [],
                value: null,
                MadalGroup: false,
                Groupfields: [{
                        title: '分组',
                        dataIndex: 'group_name',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        scopedSlots: { customRender: 'action' },
                        align: 'center',
                        width: 150,
                    }
                ],
                GroupList: [],
                GroupValue: '',
                GroupTotal: 0,
                GroupPage: 1,
                GroupPageSize: 10,
                GroupTitle: '请选择分组',
                GroupID: '',

                GroupAddID: '',
            };
        },
        computed: {
            ...mapState({
                listfields: state => state.CustomerTools.ListFields,
            }),
        },
        watch: {},
        created() {},
        mounted() {
            this.GetFields()
            this.getList()
            this.getGroupList()
        },
        methods: {
            ...mapActions({
                GetFields: 'CustomerTools/getListFields',
            }),
            SearchTable() {
                var that = this
                that.getGroupList()
            },
            getGroupList() {
                var that = this
                var params = {
                    keyword: that.GroupValue,
                    page: that.GroupPage,
                    pagesize: that.GroupPageSize
                }
                that.$http.post('api/root/qywx/QuickGroupList', params).then(res => {
                    if (res.code === 1) {
                        console.log(res);
                        var data = res.data
                        var List = data.list
                        if (List.length > 0) {
                            List.forEach((item, index) => {
                                item.key = item.id
                            })
                        }
                        that.GroupTotal = data.count
                        that.GroupList = List
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            handlePopup(e) {
                console.log(e);
            },
            SelectGroup() {
                var that = this
                if (that.MadalTitle != '修改快捷回复') {
                    that.MadalGroup = true
                }
            },
            SelectTableGroup(row) {
                var that = this
                if (that.MadalTitle == '添加快捷回复') {
                    that.ruleForm.selectValue = row.group_name
                    that.GroupAddID = row.id
                    that.MadalGroup = false
                    console.log('添加快捷回复');
                } else if (that.MadalTitle == '修改快捷回复') {
                    that.ruleForm.selectValue = row.group_name
                    that.GroupAddID = row.id
                    that.MadalGroup = false
                } else {
                    that.GroupTitle = row.group_name
                    that.GroupID = row.id
                    that.MadalGroup = false
                    this.getList()
                }
            },
            cleanGroup() {
                var that = this
                that.GroupTitle = '请选择分组'
                that.GroupID = ''
                this.getList()
            },

            DeleteItem(row) {
                var that = this
                // console.log(123);
                that.Delete(row.id)
            },
            DeleteList() {
                var that = this
                var id = that.selectedRowKeys
                that.Delete(id)
            },
            Delete(row) {
                var that = this
                var params = {
                    id: row,
                }
                that.$http.post('api/root/qywx/QuickDel', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        that.selectedRowKeys = []
                        that.getList("Del")
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            EditItem(row) {
                var that = this
                console.log(row);
                // that.ruleForm.name = row.template_name
                that.ruleForm.selectValue = row.group_name
                that.GroupAddID = row.quick_group_id
                that.ruleForm.desc = row.content
                that.EditID = row.id
                that.MadalTitle = '修改快捷回复'
                that.visible = true
            },
            EditReply() {
                var that = this
                var params = {
                    id: that.EditID,
                    content: that.ruleForm.desc,
                }
                that.$http.post('api/root/qywx/QuickEdit', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        that.getList("Edit")
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            addReply() {
                var that = this
                var params = {
                    group_id: that.GroupAddID,
                    content: that.ruleForm.desc,
                }
                that.$http.post('api/root/qywx/QuickAdd', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        that.getList("add")
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // model窗点击确定
            handleOk() {
                var that = this
                that.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        if (that.MadalTitle == '添加快捷回复') {
                            that.addReply()
                        } else {
                            that.EditReply()
                        }
                    } else {
                        return false;
                    }
                });
            },

            // model窗点击取消
            handleCancel() {
                var that = this
                that.ruleForm.selectValue = ''
                that.GroupAddID = ''
                that.ruleForm.selectValue = null
                that.ruleForm.desc = ''
                that.MadalTitle = ''
                that.visible = false
                that.$refs['ruleForm'].resetFields();
            },
            ClickModalAdd() {
                var that = this
                that.MadalTitle = '添加快捷回复'
                that.visible = true
            },
            SearchList() {
                var that = this
                console.log(123123);
                that.getList()
            },
            getList(MES) {
                var that = this
                var params = {
                    group_id: that.GroupID,
                    keyword: that.keyword,
                    page: that.page,
                    pagesize: that.pagesize,
                }
                that.$http.post('api/root/qywx/QuickList', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res.data);
                        var data = res.data.list
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                item.key = item.id
                            })
                            // console.log(data);
                            that.total = res.data.count
                            that.listData = data
                            if (MES) {
                                if (MES == 'add') {
                                    that.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    that.handleCancel()
                                    that.$refs['ruleForm'].resetFields();
                                } else if (MES == 'Del') {
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                } else {
                                    that.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    that.handleCancel()
                                    that.$refs['ruleForm'].resetFields();
                                }
                            }
                        } else {
                            that.listData = data
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },

            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.page = pageno;
                this.pagesize = pagesize;
                this.getList()
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.page = current;
                this.pagesize = size;
                this.getList()
            },
            handleGroupPageChange(pageno, pagesize) {
                this.GroupPage = pageno;
                this.GroupPageSize = pagesize;
                this.getGroupList()
            },
            onShowSizeGroupChange(current, size) {
                this.GroupPage = current;
                this.GroupPageSize = size;
                this.getGroupList()
            },
            onSelectChange(selectedRowKeys) {
                // console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }

    .table-breadcrumb {
        height: 6%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>